React のアプリを Amplify でホストしてみた　～2022年冬～

こんにちは、リサリサです。こちらのブログを参考に React Admin を試してみました。すごく簡単に管理画面が作れてびっくりしました。すごい！

今回はこの React アプリを Amplify でホストしてみたので、記事にしてみます。ちょっとコンソールをポチポチするだけでできて、とても簡単でした。

やりたい事

React Admin のチュートリアルで作ったアプリを Amplify でホストしたい。

やってみた

GitHubにプッシュ

GitHubなどにコードをプッシュする必要があります。今回はGitHubを使いました。privateリポジトリも使用可能です。

ウェブアプリケーションをホストする

AWS Amplify を開くと以下のような画面になります。「利用を開始する」をクリックします。

バックエンドのビルドと、ウェブアプリケーションのホストのどちらかを選ぶようになるので、「ウェブアプリケーションをホスト」の「使用を開始する」を選択します。

リポジトリを選択する画面になるので、「GitHub」を選びます。初回は、GitHubと連携作業が必要になります。

リポジトリとブランチを選択します。

ビルドコマンドが自動で作成されます。自動生成のまま何も変更せずに動きました。

「保存しデプロイ」します。

以下のようなメッセージが表示され、しばらくするとアプリケーションが作成され、ビルドが開始します。

以下のようにプロビジョンからビルド、デプロイと自動で進んでいきます。

検証まで緑色になると、以下のリンクからサイトが確認できます。

リンクをクリックしたら、こんな感じでサイトが出来ていました！

次からは、指定したリポジトリ、ブランチにプッシュするだけで自動でデプロイプロセスが動くようになります。便利。

最後に

思っていたより、とても簡単にホストできました。今度はバックエンド側も作って連携してみたいと思います。どなたかのお役に立てれば幸いです。